<template>
  <div class="scheduling-management">
    <h1>智能排产管理</h1>
    <el-tabs v-model="activeTab" @tab-change="onTabChange">
      <!-- 排产计划管理 -->
      <el-tab-pane label="排产计划" name="plans">
        <schedule-plan-list 
          ref="planListRef"
          @execute-plan="switchToExecution"
          @view-details="viewPlanDetails"
        />
      </el-tab-pane>
      
      <!-- 排产算法执行 -->
      <el-tab-pane label="执行排产" name="execution">
        <schedule-execution 
          ref="executionRef"
          @plan-saved="refreshPlanList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import SchedulePlanList from '@/components/SchedulePlanList.vue';
import ScheduleExecution from '@/components/ScheduleExecution.vue';
import { ElMessage } from 'element-plus';

const activeTab = ref('plans');
const planListRef = ref(null);
const executionRef = ref(null);

// 标签页切换事件
const onTabChange = (tabName) => {
  console.log('切换到标签页:', tabName);
};

// 切换到执行排产页面
const switchToExecution = () => {
  activeTab.value = 'execution';
  ElMessage.info('切换到执行排产页面');
};

// 查看排产计划详情
const viewPlanDetails = (planId) => {
  // 可以实现计划详情查看功能
  console.log('查看排产计划详情:', planId);
};

// 刷新排产计划列表
const refreshPlanList = () => {
  if (planListRef.value && planListRef.value.loadPlans) {
    planListRef.value.loadPlans();
  }
  activeTab.value = 'plans';
};
</script>

<style scoped>
.scheduling-management {
  padding: 20px;
}

:deep(.el-tabs__content) {
  padding-top: 20px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
}
</style>